<template>
  <div class="loading_wrap" v-show="loading">
    <svg class="loading_svg" width="60px" height="60px" viewBox="0 0 44 44">
        <circle class="path" fill="none" stroke-width="4" stroke-linecap="round" cx="22" cy="22" r="20"></circle>
    </svg>
  </div>
</template>

<script>
import { mapState } from 'vuex';
export default {
  name: 'loading',
  computed: {
    ...mapState([
      'loading'
    ])
  }
};
</script>
<style lang="scss" scoped>
  @import '../style/mixin.scss';
  .loading_wrap {
    position: fixed;
    width: 100%;
    height: 100%;
    left: 50%;
    top: 0;
    transform: translateX(-50%);
    background-color: transparent;
    z-index: 100;
    .loading_svg {
      width: 100px;
      position: absolute;
      top: 50%;
      left: 50%;
      margin: -50px 0 0 -50px;
      animation: rotator 1.4s linear infinite;
      .path {
        // stroke: $color;
        stroke-dasharray: 126;
        stroke-dashoffset: 0;
        transform-origin: center;
        animation: dash 1.4s ease-in-out infinite;
      }
    }
  }
  @keyframes rotator {
    0% {
      transform: scale(0.5) rotate(0deg);
    }
    100% {
      transform: scale(0.5) rotate(270deg);
    }
  }
  @keyframes dash {
    0% {
      stroke-dashoffset: 126;
    }
    50% {
      stroke-dashoffset: 63;
      transform: rotate(135deg);
      stroke: $color;
    }
    100% {
      stroke-dashoffset: 126;
      transform: rotate(450deg);
      stroke: $with;
    }
  }
</style>
